<template>
  <view class="content">
    <!-- <image src="" mode=""></image>
     -->
    <view style="position: absolute;top: 90rpx;left: 10rpx;" @click="leftClick">
      <u-icon name="arrow-leftward" size="23"></u-icon>
    </view>
    <view class="">

    </view>
    <view class="input">
      <view class="input-item">
        <image src="../../static/images/login_acc.png" mode=""></image>
        <input v-model="loginForm.username" type="text" name="" placeholder="請輸入用戶名" id="">
      </view>
      <view class="input-item">
        <image src="../../static/images/login_pw.png" mode=""></image>
        <view class="pwdflex">
          <input style=" outline: none;
        -webkit-appearance: button;
        -webkit-appearance: none;
        border-radius: 0;
        background: none;
        border: none;" v-model="loginForm.password" :type="oldShow?'text':'password'" name="" placeholder="請輸入密碼"
                 id="">
          <view>
            <u-icon :name="oldShow?'eye-fill':'eye-off'" size="23" @click="oldShow=!oldShow"></u-icon>
          </view>
        </view>
      </view>
      <view class="input-bottom">
        <view @click="toUrl('/pages/login/findpwd')">忘記密碼</view>
        <view @click="toUrl('/pages/register/index')">新用戶注冊</view>
      </view>

    </view>
    <view class="login-btn" @click="login">
      登錄
    </view>
  </view>
</template>

<script>
import {
  mapActions,
  mapState
} from 'vuex'

export default {
  data() {
    return {
      oldShow: false,
      loginForm: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    leftClick() {
      uni.navigateBack({
        delta: 1
      })
    },
    ...mapActions([
      "sendLogin",
    ]),
    login() {
      if (!this.loginForm.username) {
        return uni.showToast({
          title: "請輸入用戶名",
          icon: 'none', //如果要纯文本，不要icon，将值设为'none'
          duration: 2000 //持续时间为 2秒
        })
      }
      if (!this.loginForm.password) {
        return uni.showToast({
          title: "請輸入密碼",
          icon: 'none', //如果要纯文本，不要icon，将值设为'none'
          duration: 2000 //持续时间为 2秒
        })
      }
      this.sendLogin(this.loginForm)
    },
    toUrl(url) {
      uni.navigateTo({
        url: url
      })
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100vw;
  height: 100vh;
  background: url('../../static/images/login_bg.png') no-repeat;
  background-size: 100vw 100vh;
  position: relative;

  // background-image: url('../../static/images/login_bg.png');
}

.pwdflex {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.input {
  // margin-top: 422rpx;
  position: absolute;
  top: 422rpx;
  left: 50%;
  transform: translate(-50%);
  top: 422rpx;
  width: 650rpx;
  height: 396rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 20rpx 50rpx rgba(125, 122, 248, 0.3);
  opacity: 1;
  border-radius: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .input-item {
    width: 574rpx;
    margin: 20rpx 0;
    padding: 20rpx 0;
    border-bottom: 1px solid #E5E7FA;
    display: flex;
    align-items: center;


    image {
      width: 38rpx;
      height: 38rpx;
      margin-right: 20rpx;
    }

  }

  .input-bottom {
    width: 574rpx;
    display: flex;
    justify-content: space-between;
    font-size: 24rpx;
    color: #7A7DEE;
  }

}

.login-btn {
  position: absolute;
  top: 978rpx;
  left: 50%;
  transform: translate(-50%);
  width: 600rpx;
  height: 88rpx;
  background: linear-gradient(80deg, #B9B3F7 0%, #6D6BF6 100%);
  box-shadow: 0rpx 15rpx 30rpx rgba(110, 108, 248, 0.3);
  border-radius: 30rpx;
  color: #FFFFFF;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  text-align: center;
  line-height: 88rpx;
}
</style>
